var points = 24;
(function ($) {
    var extensionMethods = {
        pips: function (settings) {
            options = {

                first: "number", 	// "pip" , false
                last: "number", 	// "pip" , false
                rest: "pip" 		// "number" , false
            };

            $.extend(options, settings);
            this.element.addClass('ui-slider-pips').find('.ui-slider-pip').remove();
            var pips = this.options.max - this.options.min;
            for (i = 0; i <= pips; i++) {
                var s = $('<span class="ui-slider-pip"><span class="ui-slider-line"></span><span class="ui-slider-number" style="color: red;font-size: 18px;">' + i + '</span></span>');
                if (0 == i) {
                    s.addClass('ui-slider-pip-first');
                    if ("number" == options.first) {
                        s.addClass('ui-slider-pip-number');
                    }
                    if (false == options.first) {
                        s.addClass('ui-slider-pip-hide');
                    }
                } else if (pips == i) {
                    s.addClass('ui-slider-pip-last');
                    if ("number" == options.last) {
                        s.addClass('ui-slider-pip-number');
                    }
                    if (false == options.last) {
                        s.addClass('ui-slider-pip-hide');
                    }
                } else {
                    if ("number" == options.rest) {
                        s.addClass('ui-slider-pip-number');
                    }
                    if (false == options.rest) {
                        s.addClass('ui-slider-pip-hide');
                    }
                }

                if (this.options.orientation == "horizontal")
                    s.css({left: '' + (100 / pips) * i + '%'});
                else
                    s.css({top: '' + (100 / pips) * i + '%'});
                this.element.append(s);
            }
        }
    };
    $.extend(true, $['ui']['slider'].prototype, extensionMethods);
})(jQuery);
(function ($) {
    var extensionMethods = {
        float: function (settings) {
            options = {};
            $.extend(options, settings);
            this.element.addClass('ui-slider-float');
            if (this.options.values) {
                var $tip = [
                    $('<span class="ui-slider-tip">' + this.options.values[0] + '</span>'),
                    $('<span class="ui-slider-tip">' + this.options.values[1] + '</span>')
                ];
            } else {
                var $tip = $('<span class="ui-slider-tip">' + this.options.value + '</span>');
            }
            this.element.find('.ui-slider-handle').each(function (k, v) {
                $(v).append($tip[k]);
            })
            this.element.find('.ui-slider-number').each(function (k, v) {
                var $e = $(v).clone().removeClass('ui-slider-number').addClass('ui-slider-tip-number');
                $e.insertAfter($(v));
            });

            // when slider changes, update handle tip value.
            this.element.on('slidechange slide', function (e, ui) {
                $(ui.handle).find('.ui-slider-tip').text(ui.value);
            });

        }


    };

    $.extend(true, $['ui']['slider'].prototype, extensionMethods);


})(jQuery);


/* ------------------------- */
/* demo stuff */

$(document).ready(function () {
    $('.slider, .slider2').slider({min: 0, max: points, animate: true, value: 8});
    $('.slider2').slider('pips', {rest: 'number'});
});
/**
 * echarts图例
 */
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart_main'));

function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random().toFixed(2) * 21 - 10;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
        ]
    }
}

var data = [];
var now = +new Date(1994, 1, 28);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 10;
for (var i = 0; i < 1000; i++) {
    data.push(randomData());
}

var color = '#fff', c2 = '#443d45';
// 指定图表的配置项和数据
option = {
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    grid: {left: '3%', right: '4%', top: '10%', bottom: '20%', containLabel: true},
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        },
        splitNumber: 10,
        axisLine: {
            show: false
        },
        axisLabel: {
            color: color
        },
        axisTick: {
            lineStyle: {
                color: c2
            }
        }
    },
    yAxis: {
        type: 'value',
        /*boundaryGap: [0, '100%'],*/
        boundaryGap: false,
        axisLine: {
            show: false
        },
        axisLabel: {
            color: color
        },
        axisTick: {
            lineStyle: {
                color: c2
            }
        },
        splitLine: {
            lineStyle: {
                color: c2,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
                opacity: 0.5
            }
        }
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        areaStyle: {normal: {}},
        data: data,
        lineStyle: {
            color: '#000f91'
        },
        itemStyle: {
            normal: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#000f91' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(0,15,145,0.01)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
            },
        }
    }]
};
myChart.setOption(option);
//实时改变大小
window.onresize = function () {
    myChart.resize();
}
setInterval(function () {

    for (var i = 0; i < 5; i++) {
        data.shift();
        data.push(randomData());
    }

    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);
